<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js'
            charset='utf-8'></script>

    <script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

    {% load static %}
    <link rel="stylesheet" href="{% static 'css/main.css' %}">
    <link rel="stylesheet" href="{% static 'css/iconfont.css' %}">
    <title>我要去看世界杯</title>
</head>
<body>
<div class="page">
    <header class="bar bar-nav">
        <a class="button button-link button-nav pull-right" onclick="alert('可爱的程序猿说此功能5天之内开发完毕哦~')"
           data-transition='slide-out'>
            <span class="icon icon-me"></span>
            修改资料
        </a>
        <div class="title">我要去看世界杯</div>
    </header>

    <div class="content">
        <div class="buttons-tab">
            <a href="#tab1" class="tab-link active button" style="color:#b4191e;">中票列表</a>
            <a href="#tab2" class="tab-link button" style="color:#b4191e;"
               onclick="alert('可爱的程序猿说此功能5天之内开发完毕哦~')">按地区</a>
            <a href="#tab3" class="tab-link button" style="color:#b4191e;"
               onclick="alert('可爱的程序猿说此功能5天之内开发完毕哦~')">按场次</a>
        </div>


        <div class="tabs">
            <div id="tab1" class="tab active">
                <div class="content-block">
                    <div class="searchbar row">
                        <div class="search-input col-85">
                            <input type="search" id='search' placeholder='输入关键字...'
                                   style="border:1px solid #ccc;border-radius:0;"/>
                        </div>
                        <a class="button button-fill button-primary col-15"
                           style="border-radius:0;background-color:#b4191e;border:1px solid #b4191e;margin-left:0"><span
                                class="icon icon-search" onclick="alert('可爱的程序猿说此功能5天之内开发完毕哦~')"></span></a>
                    </div>
                    <div class="list-block media-list inset">
                        <ul>
                            {% for record in recordlist %}
                                <li>
                                    <a href="#" class="item-link item-content">
                                        <div class="item-media"><img
                                                src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike272%2C5%2C5%2C272%2C90/sign=2f79afb3db1373f0e13267cdc566209e/a8773912b31bb051062384e03c7adab44bede0f7.jpg"
                                                width="44"></div>
                                        <div class="item-inner">
                                            <div class="item-title-row">
                                                <div class="item-title">{{ record.wxname }}
                                                    {% if record.gender == 1 %}
                                                        <img src="http://worldcuptemp.oss-cn-beijing.aliyuncs.com/male.png"
                                                             width="20">{% endif %}
                                                    {% if record.gender == 2 %}<img
                                                            src="http://worldcuptemp.oss-cn-beijing.aliyuncs.com/female.png"
                                                            width="20">{% endif %}
                                                </div>
                                            </div>
                                            <div class="item-subtitle"></div>
                                            <div>中签比赛：Match {{ record.ticket_session }}</div>
                                            <div class="item-subtitle"></div>
                                            <div>微信号：{{ record.wxid|slice:"0:5" }}***</div>
                                            <div class="item-subtitle"></div>
                                            <div>城市：{{ record.start_city }}</div>
                                            <div class="item-subtitle"></div>
                                            <div>逗留时间：{{ record.start_date|date:"Y-m-d" }}
                                                -- {{ record.end_date|date:"Y-m-d" }}</div>
                                            <div class="item-subtitle"></div>
                                            <div>备注：{{ record.remark }}</div>
                                        </div>
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>

                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            {% if recordlist.has_previous %}
                                <li>
                                    <a href="?page={{ recordlist.previous_page_number }}"
                                       aria-label="Previous"><span aria-hidden="true">&laquo;上一页</span></a>
                                </li>
                            {% endif %}

                            {% for pg in recordlist.page_range %}
                                {% if pg == recordlist.cp %}
                                    <li class="active"><a href="?page={{ recordlist.cp }}">{{ recordlist.cp }}</a>
                                    </li>
                                {% else %}
                                    <li><a href="?page={{ pg }}">{{ pg }}</a></li>
                                {% endif %}
                            {% endfor %}
                            {% if recordlist.has_next %}
                                <li>
                                    <a href="?page={{ recordlist.next_page_number }}" aria-label="Next"><span
                                            aria-hidden="true">&raquo;下一页</span></a></li>
                            {% endif %}
                        </ul>
                    </nav>

                </div>
            </div>

            <div id="tab2" class="tab">
                <div class="content-block">
                    <p>开发中哦~</p>
                </div>
            </div>

            <div id="tab3" class="tab">
                <div class="content-block">
                    <p>开发中哦~</p>
                </div>
            </div>
        </div>
    </div>


</div>

<!--cnzz统计代码,误删-->
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1267142462'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s13.cnzz.com/z_stat.php%3Fid%3D1267142462%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>

</body>
</html>